<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>航展区概况</title>
    <link rel="stylesheet" href="/css/public.css">
    <link rel="stylesheet" href="/css/main.css">
    <script src="/js/jquery.js"></script>
    <script src="/js/echarts.js"></script>
    <script src="/js/common.js"></script>
    <%--地图--%>
    <script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=f50df840d14861c95415ec7742d42d86&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder,AMap.DistrictSearch"></script>

</head>
<body>
    <div class="container">
        <%--顶部导航--%>
        <div class="nav-area">
            <div class="nav-left">
                <%--<a href="/airReport.do">&lt; 日报</a>--%>
                <a href="http://61.145.229.205:60000/airshow/default.html" target="_self">&lt; 日报</a>
            </div>
            <div class="nav-center">
                <h1>客流分布概况</h1>
            </div>
            <div class="nav-right">
                <a href="/index.do">整体概况 &gt;</a>
            </div>
        </div>

        <%--滚动信息--%>
        <div class="message-area">
            <ul class="roll__list">
            </ul>
        </div>

        <div class="crowd-area">
            <%--上部--%>
            <div class="crowd-top-area">

                <%--左上-客流数据--%>
                <div class="crowd-topleft-area public-box">
                    <div class="public-box-title">
                        航展馆客流数据
                    </div>
                    <%--图示--%>
                    <div class="chart-label">
                        <span>
                            <em class="yellow-label"></em> 馆内客流总量
                        </span>
                            <span>
                            <em class="white-label"></em> 入场客流时变
                        </span>
                            <span>
                            <em class="orange-label"></em> 离场客流时变
                        </span>
                    </div>
                    <%--图表--%>
                    <div class="crowd-topleft-chart" id="flow_chart">
                    </div>
                </div>

                <%--右上-位置分布--%>
                <div class="crowd-topright-area public-box">
                    <div class="public-box-title">
                        参展人员位置分布
                    </div>
                    <%--图表--%>
                    <div class="crowd-topright-chart" id="positionChart">
                    </div>
                </div>
            </div>

            <%--下部-热力图--%>
            <div class="crowd-bottom-area public-box">
                <div class="public-box-title">
                    客流热力图
                </div>
                <%--图示--%>
                <div class="chart-label">
                    客流密度： 零散
                    <em style="background: #74bce7"></em>
                    <em style="background: #96db86"></em>
                    <%--<em style="background: #fff89e"></em>--%>
                    <em style="background: #f96322"></em>
                    <em style="background: #cb2b26"></em> 密集
                </div>
                <%--图表--%>
                <div class="crowd-bottom-chart" id="HeatChart">
                </div>
                <%--伸缩按钮--%>
                <button class="extend-btn" id="showBtn">↑ 展开</button>
            </div>

        </div>
    </div>


    <%@ include file="common.jsp" %>
    <script src="/js/gpsUtil.js"></script>
    <script src="/js/airPassengerFlow.js"></script>
<script>
    var show = false;

    $(function () {
        airPassengerFlow.init();

        //模块伸缩
        $("#showBtn").click(function(){
            if(show){
                $(".crowd-top-area").removeClass("show-small");
                $(".crowd-bottom-area").removeClass("show-big");
                airPassengerFlow.flowChart.resize();
                airPassengerFlow.positionChart.resize();
                show = false;
                $(this).text("↑ 展开");
            }
            else {
                $(".crowd-top-area").addClass("show-small");
                $(".crowd-bottom-area").addClass("show-big");
                show = true;
                $(this).text("↓ 收缩");
            }
        })

    })
</script>
</body>
</html>